<template>
  <div class="tp">
    <Header/>

    <Content>
      <div class="cp">
        <div class="card">
          <BasicForm @register="registerFilter" @submit="onSearch">
          </BasicForm>

          <BasicTable @register="state[0].registerTable" :resizeHeightOffset="44">
            <template #totalTransactionPrice="{ record }">
              {{Math.abs(record.totalTransactionPrice)}}
            </template>
            <template #action="{ record }">
              <TableAction
                  :divider="true"
                  :actions="[
                  {
                    color: 'success',
                    label: '详情',
                    onClick: () => onDetail(record),
                  },
                ]"
              />
            </template>
            <template #oldOrderSn="{ record }">
              <TableAction
                :divider="true"
                :actions="[
                  {
                    color: 'success',
                    label: record.oldOrderSn,
                    onClick: () => onodlDetail(record),
                  },
                ]"
              />
            </template>
          </BasicTable>
        </div>
      </div>
    </Content>

    <DetailOrder @register="registerDetail1"/>
    <BackDetail @register="registerDetail"/>
  </div>
</template>

<script setup>
import {defineOptions, h, nextTick, onMounted, reactive, watch} from 'vue';

import {useRouter} from 'vue-router';

import {BasicTable, TableAction, useTable} from '@/components/Table';
import Header from '@/widget/header.vue';
import Content from '@/widget/content.vue';
import {PAGE} from '@/api/http';

import {BasicForm, useForm} from '@/components/Form/index';
import ProImgCell from "@/widget/pro-img-cell.vue";
import {getLabel, itemGoodsTDType,itemGoodsType, chargebackType} from "@/api/ds.js";
import {useDrawer} from "@/components/Drawer";

import BackDetail from './back-detail.vue';
import DetailOrder from '../cashier/order-detail.vue';
import dayjs from 'dayjs'
const [registerDetail, {openDrawer: detailDrawer}] = useDrawer();
const [registerDetail1, {openDrawer: detailDrawer1}] = useDrawer();

defineOptions({name: 'BackList'});

const router = useRouter();

const [registerFilter, filter] = useForm({
  baseColProps: {style: {paddingRight: '12px'}},
  actionColOptions: {span: 12},
  submitOnReset: true,
  schemas: [
    {
      field: 'masterOrderSn',
      component: 'Input',
      componentProps: {
        placeholder: '输入关联订单号进行搜索',
      },
      colProps: {span: 6},
    },

    {
      field: 'goodsName',
      component: 'Input',
      componentProps: {
        placeholder: '输入商品名称进行搜索',
      },
      colProps: {span: 6},
    },

    {
      field: 'memberNameOrMobile',
      component: 'Input',
      componentProps: {
        placeholder: '输入客户姓名/手机号进行搜索',
      },
      colProps: {span: 6},
    },

    {
      field: 'itemGoodsType',
      component: 'Select',
      componentProps: {
        placeholder: '选择退单类型',
        mode: 'multiple',
        showArrow:true,
        options: itemGoodsTDType,
      },

      colProps: {span: 6},
    },


    {
      field: 'startTime',
      component: 'DatePicker',
      componentProps: {
        showTime: false,
        placeholder: '开始日期',
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        disabledDate: (value) => filter.getFieldsValue().endTime < dayjs(value).format("YYYY-MM-DD")
      },
      colProps: {span: 6},
    },

    {
      field: 'endTime',
      component: 'DatePicker',
      componentProps: {
        showTime: false,
        placeholder: '结束日期',
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        disabledDate: (value) => filter.getFieldsValue().startTime > dayjs(value).format("YYYY-MM-DD")
      },
      colProps: {span: 6},
    },
  ],
});

const [registerTable0, table0] = useTable({
  api: PAGE('/cashier/getMasterTdOrderBeanList'),
  immediate: false,
  beforeFetch: (arg) => Object.assign(getSearchArg(arg), {}),
  columns: [
    {
      title: '商品信息',
      dataIndex: 'goodsName',
      ellipsis: false,
      width: 290,
      customRender: ({value: title, record}) =>
          h(ProImgCell, {src: record.goodsThumb, title}),
    },

    {
      title: '客户信息',
      dataIndex: 'memberCode',
      ellipsis: false,
      customRender: ({record}) =>
          h('span', {innerHTML: `${record.memberName}&nbsp;${record.memberMobile}`},),
    },
    {
      title: '关联订单',
      dataIndex: 'oldOrderSn',
      ellipsis: false,
      width: 200,
      slots: { customRender: 'oldOrderSn' },
    },
    {
      title: '退单类型',
      dataIndex: 'itemGoodsType',
      ellipsis: false,
      customRender: ({value}) => getLabel(itemGoodsTDType, value)
    },

    {
      title: '退款金额',
      dataIndex: 'totalTransactionPrice',
      ellipsis: false,
      slots: { customRender: 'totalTransactionPrice' },
    },
    {
      title: '退款时间',
      dataIndex: 'addTime',
      ellipsis: false,
    },
    {
      title: '操作人',
      dataIndex: 'cashierName',
      ellipsis: false,
    },
  ],
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'masterOrderSn',

  actionColumn: {
    title: '操作',
    align: 'center',
    width: 90,
    dataIndex: 'action',
    fixed: 'right',
    slots: {customRender: 'action'},
  },
});

const state = reactive({
  search: {
    type: 0
  },
  0: {
    registerTable: registerTable0,
    table: table0,
  },
});

function getSearchArg(arg) {
  console.log(Object.assign(arg, filter.getFieldsValue()))
  const data = filter.getFieldsValue();
  return Object.assign(arg, data);
}

onMounted(async () => {
  await filter.setFieldsValue({
    'masterOrderSn': router.currentRoute.value.query?.masterOrderSn || ''
  })
  onSearch()
});

watch(
    () => state.search.type,
    () => nextTick(onSearch),
);

async function onSearch() {
  const {type} = state.search,
      target = state[type];

  target.table.reload();
  target.table.redoHeight();
}


function onodlDetail (e) {
  detailDrawer1(true, {masterOrderSn:e.masterOrderSn, memberCode:e.memberCode, isTD:true, oldOrderSn: e.oldOrderSn});
}
function onDetail(record) {
  console.log(record, 'record')
  detailDrawer(true, {record});
}
</script>
<style lang="less" scoped>
.card {
  padding: 16px;
}
</style>
